<template>
  <div>
    <el-row class="row">
      <el-col class="cols" :span="12">
        <div style="width: 80%; height: 70%">
          <div class="col-div">
            <span>今日信息</span>
          </div>

          <div class="cc1">
            <el-row>
              <el-col :span="6">今日预约人数:</el-col>
              <el-col :span="6">
                <el-link type="primary"> {{ tk1 }} &nbsp;&nbsp;</el-link>
                人</el-col
              >
              <el-col :span="6">今日评估人数:</el-col>
              <el-col :span="6">
                <el-link type="primary"> 0 &nbsp;&nbsp;</el-link>
                人</el-col
              >
            </el-row>
          </div>
        </div>
      </el-col>

      <el-col class="cols" :span="12">
        <div style="width: 80%; height: 70%">
          <div class="col-div">
            <span>汇总</span>
          </div>

          <div class="cc1">
            <el-row>
              <el-col :span="6">今日预约人数:</el-col>
              <el-col :span="6">
                <el-link type="primary"> {{ tk2 }} &nbsp;&nbsp;</el-link>
                人</el-col
              >
              <el-col :span="6">今日评估人数:</el-col>
              <el-col :span="6">
                <el-link type="primary"> 0 &nbsp;&nbsp;</el-link>
                人</el-col
              >
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row class="row">
      <el-col class="cols" :span="12">
        <div class="col-div">
          <span>平台概况</span>
        </div>
        <el-row class="cc2">
          <el-col :span="8">
            <img src="../assets/yyrs.png" width="120" height="80" />
            <div style="margin-top: 10px">
              <el-link type="primary">
                &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;{{ tk5 }} &nbsp;&nbsp;</el-link
              >份
            </div>
          </el-col>
          <el-col :span="8">
            <img src="../assets/gyfa.png" width="120" height="80" />
            <div style="margin-top: 10px">
              <el-link type="primary">
                &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;{{ tk6 }} &nbsp;&nbsp;</el-link
              >份
            </div>
          </el-col>
          <el-col :span="8">
            <img src="../assets/gyzz.png" width="120" height="80" />
            <div style="margin-top: 10px">
              <el-link type="primary">
                &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;{{ tk7 }} &nbsp;&nbsp;</el-link
              >份
            </div>
          </el-col>
        </el-row>
      </el-col>

      <el-col class="cols" :span="12">
        <div class="col-div">
          <span>会员统计</span>
        </div>
        <el-row class="cc2">
          <el-col :span="8">
            <img src="../assets/jrxzhy.png" width="120" height="80" />
            <div style="margin-top: 10px">
              <el-link type="primary">
                &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;{{ tk3 }} &nbsp;&nbsp;</el-link
              >份
            </div>
          </el-col>
          <el-col :span="8">
            <img src="../assets/jrdlhy.png" width="120" height="80" />
            <div style="margin-top: 10px">
              <el-link type="primary">
                &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;{{ tk3 }} &nbsp;&nbsp;</el-link
              >份
            </div>
          </el-col>
          <el-col :span="8">
            <img src="../assets/hyzs.png" width="120" height="80" />
            <div style="margin-top: 10px">
              <el-link type="primary">
                &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;{{ tk4 }} &nbsp;&nbsp;</el-link
              >份
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row class="rows">
      <el-col :span="24">
        <div class="col-div">
          <span>健康系统流畅图</span>
        </div>
        <div class="col-div">
          <img src="../assets/u522.png" height="90%" width="90%" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tk1: 0,
      tk2: 0,
      tk3: 0,
      tk4: 0,
      tk5: 0,
      tk6: 0,
      tk7: 0,
    };
  },
  methods: {
    tklist1() {
      this.axios.post("/rear/Menu/tkfont", this.tk1).then((req) => {
        this.tk1 = req.data;
      });
    },
    tklist2() {
      this.axios.post("/rear/Menu/tkcount", this.tk2).then((req) => {
        this.tk2 = req.data;
      });
    },
    tklist3() {
      this.axios.post("/rear/tkmember", this.tk3).then((req) => {
        this.tk3 = req.data;
      });
    },
    tklist4() {
      this.axios.post("/rear/tklistme", this.tk4).then((req) => {
        this.tk4 = req.data;
      });
    },
    tklist5() {
      this.axios.post("/rear/Menu/tkcounto", this.tk5).then((req) => {
        this.tk5 = req.data;
      });
    },
    tklist6() {
      this.axios.post("/rear/tklist", this.tk6).then((req) => {
        this.tk6 = req.data;
      });
    },
    tklist7() {
      this.axios.post("/rear/tklistee", this.tk7).then((req) => {
        this.tk7 = req.data;
      });
    },
  },
  created() {
    this.tklist1();
    this.tklist2();
    this.tklist3();
    this.tklist4();
    this.tklist5();
    this.tklist6();
    this.tklist7();
  },
};
</script>

<style scoped>
.row {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  height: 180px;
}
.rows {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin-top: 20px;
  height: 500px;
}
.col-div {
  margin-top: 15px;
  margin-left: 30px;
  font-size: 17px;
  font-weight: 800;
}
.cols {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.cc1 {
  margin-top: 40px;
  margin-left: 30px;
}
.cc2 {
  margin-top: 10px;
  margin-left: 30px;
}
.span {
  margin-top: 20px;
}
</style>